<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:insert="~{common/common::common}"/>
<head>
    <meta charset="UTF-8">
    <title>地区前三商品</title>
    <script src = "../../static/js/echarts.js"></script>
</head>
<body>
<div th:replace="~{common/leftnavbar::leftnav}"></div>
    <div style="width:200px; margin-left: 300px">
        <div>
            <p style="text-align: left;font-size: 150%"><b>地区TOP3商品展示</b></p>
        </div>
        地区
        <select id="areaSelect" >
            <option value="华南" class="active">华南</option>
            <option value="华北">华北</option>
            <option value="西北">西北</option>
            <option value="华东">华东</option>
            <option value="西南">西南</option>
            <option value="华中">华中</option>
            <option value="华北">华北</option>
        </select>
        <button id="btn">搜索</button>
        <div id="chart_box"  style="width: 750px;height:550px;margin:0 auto;padding-left:25px"></div>
    </div>
    </body>

</body>

<script th:inline="javascript">

    var dom = document.getElementById("chart_box");
    var myChart = echarts.init(dom);

    mychart1('华南');

    document.getElementById('btn').addEventListener('click',function(){
        var myselect=document.getElementById("areaSelect");
        var index=myselect.selectedIndex;
        var areatmp = myselect.options[index].value;
        mychart1(areatmp);
        //alert(areatmp)
    });

    function mychart1(areatmp) {
        //var areatmp = document.getElementById("areaSelect").value;
        axios.get('/area_data', {
            //area: "华南"
            params: {
                area: areatmp
            }
        })
            .then(function (res) {
                console.log(res.data)
                console.log(areatmp)
                option = {
                    title: {
                        text: areatmp+'地区TOP3商品'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: res.data.names
                    },
                    series: [
                        {
                            name: areatmp,
                            type: 'bar',
                            data: res.data.values
                        },
                    ]
                };
                myChart.setOption(option, true);
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    function accessfunc() {
        if (document.getElementById("access").getAttribute("class")=="layui-nav-item layui-nav-itemed"){
            document.getElementById("access").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("access").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }
    function categoryfunc() {
        if (document.getElementById("category").getAttribute("class")=="layui-nav-item layui-nav-itemed"){
            document.getElementById("category").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("category").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }
</script>
</html>